<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.userName"
        placeholder="User Name"
        style="width: 200px;"
        class="filter-item"
      />

      <el-select
        v-model="listQuery.gender"
        placeholder="Gender"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option
          v-for="item in genderTypeOptions"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >Search</el-button>
      <el-button
        round
        v-waves
        class="filter-item"
        type="suceess"
        icon="el-icon-refresh"
        @click="handleFilterReset"
      >Reset</el-button>
      <el-button
        round
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="add()"
      >Add</el-button>

      <el-button
        round
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-delete"
        @click="handleDelete"
      >Deletes</el-button>
    </div>

    <div>
      <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="gender" label="性别" width="120"></el-table-column>
        <el-table-column prop="phone_num" label="电话"  width="200"></el-table-column>
        <el-table-column prop="idcard" label="身份证" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row,$index}">
            <el-button round type="primary" size="mini" @click="handleUpdate(row)">Edit</el-button>
            <el-button
              round
              v-if="row.status!='deleted'"
              size="mini"
              type="danger"
              @click="handleDelete(row,$index)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="28%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item label="姓名" style="width: 360px;">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" style="width: 360px;">
          <el-input v-model="form.phone_num"></el-input>
        </el-form-item>
        <el-form-item label="身份证" style="width: 360px;">
          <el-input v-model="form.idcard"></el-input>
        </el-form-item>
        <el-form-item label="地址" style="width: 360px;">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        userName: undefined,
        gender: undefined,
        status: undefined,
        sort: "ASC",
      },
      dialogVisible: false,
      multipleSelection: [],
      tableData: [
        {
          id: "01",
          name: "张三",
          gender: "男",
          idcard: "123456789",
          phone_num:"123-456",
          address: "A地"
        },
        {
          id: "02",
          name: "李四",
          gender: "女",
          idcard: "987654321",
          phone_num:"456-112",
          address: "B地"
        },
      ],
      form: {
        id: "",
        name: "",
        gender: "",
        idcard: "",
        phone_num:"",
        address: ""
      },
      temp: {
        id: "",
        name: "",
        gender: "",
        idcard: "",
        phone_num:"",
        address: ""
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add() {
      this.form.id = "";
      this.form.name = "";
      this.form.gender = "";
      this.form.idcard = "";
      this.form.phone_num = "";
      this.form.address = "";
      this.dialogVisible = true;
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row);
      this.form.id = this.temp.id;
      this.form.name = this.temp.name;
      this.form.gender = this.temp.gender;
      this.form.idcard = this.temp.idcard;
      this.form.phone_num = this.temp.phone_num;
      this.form.address = this.temp.address;
      this.dialogVisible = true;
    },
    handleDelete(row, index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.$alert("success!", "edit", {
        confirmButtonText: "确定",
      });
    },
  },
};
</script>

